import React from 'react';
import { ConfigProvider, Button, Card, Typography, Carousel, Row, Col } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import Sidebar from './components/Sidebar'; // 导入导航菜单组件
import testImage from './test.png'; // 导入图片

const largeCardStyle = {
  width: 760,
  margin: 10,
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: 'white', // 设置卡片背景色为白色
  color: 'black',           // 设置卡片文本色为黑色
  body: {
    padding: 0,
    overflow: 'hidden',
    flex: 1,
  },
};

const smallCardStyle = {
  width: 480,
  margin: 10,
  display: 'flex',
  flexDirection: 'column',
  height: 400,
  backgroundColor: 'white', // 设置卡片背景色为白色
  color: 'black',           // 设置卡片文本色为黑色
  body: {
    padding: 0,
    overflow: 'hidden',
    flex: 1,
  },
};

const smallCardInRowStyle = {
  width: 140, // 修改宽度以适应一行放下更多卡片
  margin: 10, // 增加边距
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: 'white', // 设置卡片背景色为白色
  color: 'black',           // 设置卡片文本色为黑色
  body: {
    padding: 0,
    overflow: 'hidden',
    flex: 1,
  },
};

const imgStyle = {
  display: 'block',
  width: '100%',
};

const buttonContainerStyle = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  height: '100%',
};

const carouselImages = [
  {
    src: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
    href: "https://example.com/image1"
  },
  {
    src: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
    href: "https://example.com/image2"
  },
  {
    src: "https://zos.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    href: "https://example.com/image3"
  }
];

const NewPage = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#1890ff', // 设置主要颜色
        colorBgContainer: '#ffffff', // 设置背景颜色
      },
    }}
  >
    <div id="root" style={{ display: 'flex', backgroundColor: 'white', color: 'black' }}>
      <Sidebar /> {/* 添加导航菜单 */}
      <div style={{ marginLeft: 256, padding: 20, width: '100%' }}> {/* 调整内容区域以适应导航菜单 */}
        <div className="card-container">
          <Card hoverable style={largeCardStyle}>
            <Row style={{ height: '100%' }}>
              <Col span={12}>
                <img
                  alt="avatar"
                  src={testImage} // 使用导入的图片
                  style={imgStyle}
                />
              </Col>
              <Col span={12} style={{ padding: 16, display: 'flex', flexDirection: 'column' }}>
                <Typography.Title level={3} style={{ color: 'black' }}>
                  “antd is an enterprise-class UI design language and React UI library.”
                </Typography.Title>
                <div style={buttonContainerStyle}>
                  <Button type="primary" onClick={() => window.location.href = 'https://sora-douyin.com/live2d'}>
                    Get Started <RightOutlined />
                  </Button>
                </div>
              </Col>
            </Row>
          </Card>
          <Card hoverable style={smallCardStyle}>
            <Carousel autoplay arrows>
              {carouselImages.map((image, index) => (
                <div key={index}>
                  <a href={image.href} target="_blank" rel="noopener noreferrer">
                    <img src={image.src} alt={`carousel-${index}`} style={imgStyle} />
                  </a>
                </div>
              ))}
            </Carousel>
          </Card>
        </div>
        <Card hoverable style={{ border: 'none', width: '100%', marginTop: 20, maxWidth: '1500px' }}>
          <Row gutter={[20, 20]}>
            {[...Array(8)].map((_, index) => (
              <Col span={3} key={index}>
                <Card hoverable style={smallCardInRowStyle}>
                  <Row style={{ height: '100%' }}>
                    <Col span={24}>
                      <img
                        alt={`avatar-${index}`}
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                        style={imgStyle}
                      />
                    </Col>
                    <Col span={24} style={{ padding: 8 }}>
                      <Typography.Title level={5} style={{ color: 'black' }}>
                        Card {index + 1}
                      </Typography.Title>
                      <Button type="primary" href="https://ant.design" target="_blank">
                        Learn More <RightOutlined />
                      </Button>
                    </Col>
                  </Row>
                </Card>
              </Col>
            ))}
          </Row>
        </Card>
      </div>
    </div>
  </ConfigProvider>
);

export default NewPage;

